import React, { PureComponent, Fragment } from 'react';
import {
  Form,
  Input,
  Select,
  DatePicker,
  Modal,
  Radio, Row, Col, Button, Table, Divider, Popconfirm,
} from 'antd';
import moment from 'moment';

const FormItem = Form.Item;
const { Option } = Select;


@Form.create()
class UpdateForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      listData: {
        realName: '',
      },
      allArr: [],
      backArr: [],
    };

    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  handleFieldChange = (e, type, record) => {
    const { allArr, backArr } = this.state;
    let arr1 = JSON.parse(JSON.stringify(allArr));
    let arr2 = JSON.parse(JSON.stringify(backArr));
    if (record === 1) {
      arr1[type] = e.target.value;
    }
    if (record === 2) {
      arr2[type] = e.target.value;
    }
    this.setState({
      allArr: arr1,
      backArr: arr2,
    });
  };
  // 表单
  renderContent = () => {
    const { form, values, modalVisible } = this.props;
    let dataSource = [{
      type: `${form.getFieldValue('rewardType') === 1 ? '首投金额(万元)' : '总资产(万元)'}`,
      key: 1,
      id: 1,
      ...values.limitRules,
    }, {
      type: `${form.getFieldValue('rewardType') === 1 ? '奖励金额(元)' : '返佣比例(%)'}`,
      key: 2,
      id: 2,
      ...values.limitValues,
    }];

    const columns = [
      {
        title: '类型',
        width: '120px',
        dataIndex: 'type',
      },
      {
        id: 3,
        render: (text, record) => {
          return (
            <Input
              addonAfter="&lt;"
              disabled={!modalVisible}
              defaultValue={record[0]}
              onChange={e => this.handleFieldChange(e, 0, record.key)}
            />
          );
        },
      },
      {
        id: 4,
        render: (text, record) => {
          return (
            <Input
              disabled={!modalVisible}
              addonAfter="&lt;"
              defaultValue={record[1]}
              onChange={e => this.handleFieldChange(e, 1, record.key)}
            />
          );
        },
      },
      {
        id: 5,
        render: (text, record) => {
          return (
            <Input
              addonAfter="&lt;"

              disabled={!modalVisible}
              defaultValue={record[2]}
              onChange={e => this.handleFieldChange(e, 2, record.key)}
            />
          );
        },
      },
      {
        id: 6,
        render: (text, record) => {
          return (
            <Input
              addonAfter="&lt;"
              disabled={!modalVisible}
              defaultValue={record[3]}
              onChange={e => this.handleFieldChange(e, 3, record.key)}
            />
          );
        },
      },
      {
        id: 7,
        render: (text, record) => {
          return (
            <Input
              addonAfter="&lt;"
              disabled={!modalVisible}
              defaultValue={record[4]}
              onChange={e => this.handleFieldChange(e, 4, record.key)}
            />
          );
        },
      },
      {
        id: 8,
        render: (text, record) => {
          return (
            <Input
              addonAfter="&lt;"
              disabled={!modalVisible}
              defaultValue={record[5]}
              onChange={e => this.handleFieldChange(e, 5, record.key)}
            />
          );
        },
      },
      {
        id: 9,
        render: (text, record) => {
          return (
            <Input
              disabled={!modalVisible}
              defaultValue={record[6]}
              onChange={e => this.handleFieldChange(e, 6, record.key)}
            />
          );
        },
      },
    ];

    return [
      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
        <Col md={12} sm={24}>
          <FormItem key="sendType" {...this.formLayout} label="发放类型">
            {form.getFieldDecorator('sendType', {
              rules: [{ required: true, message: '请选择是否！' }],
              initialValue: values.sendType,
            })(
              <Select placeholder={'请选择发放类型'} style={{ width: '100%' }}>
                <Option value={1} key={1}>回款</Option>
                <Option value={2} key={2}>按周</Option>
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col md={12} sm={24}>
          <FormItem key="rewardType" {...this.formLayout} label="奖励类型">
            {form.getFieldDecorator('rewardType', {
              rules: [{ required: true, message: '请选择奖励类型！' }],
              initialValue: values.rewardType,
            })(
              <Select placeholder={'请选择奖励类型'} disabled={!modalVisible} style={{ width: '100%' }}>
                <Option value={1} key={1}>首投</Option>
                <Option value={2} key={2}>佣金</Option>
              </Select>,
            )}
          </FormItem>
        </Col>
      </Row>,
      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
        <Col md={12} sm={24}>
          <FormItem key="newHand" {...this.formLayout} label="新手标">
            {form.getFieldDecorator('newHand', {
              rules: [{ required: true, message: '请选择是否！' }],
              initialValue: values.newHand,
            })(
              <Select placeholder={'请选择是否'} style={{ width: '100%' }}>
                <Option value={1} key={1}>是</Option>
                <Option value={2} key={2}>否</Option>
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col md={12} sm={24}>
          <FormItem key="hot" {...this.formLayout} label="hot标">
            {form.getFieldDecorator('hot', {
              rules: [{ required: true, message: '请选择是否！' }],
              initialValue: values.hot,
            })(
              <Select placeholder={'请选择是否'} style={{ width: '100%' }}>
                <Option value={1} key={1}>是</Option>
                <Option value={2} key={2}>否</Option>
              </Select>,
            )}
          </FormItem>
        </Col>
      </Row>,
      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
        <Col md={12} sm={24}>
          <FormItem key="normal" {...this.formLayout} label="普通标">
            {form.getFieldDecorator('normal', {
              rules: [{ required: true, message: '请选择是否！' }],
              initialValue: values.normal,
            })(
              <Select placeholder={'请选择是否'} style={{ width: '100%' }}>
                <Option value={1} key={1}>是</Option>
                <Option value={2} key={2}>否</Option>
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col md={12} sm={24}>
          <FormItem key="debt" {...this.formLayout} label="债转标">
            {form.getFieldDecorator('debt', {
              rules: [{ required: true, message: '请选择是否！' }],
              initialValue: values.debt,
            })(
              <Select placeholder={'请选择是否'} style={{ width: '100%' }}>
                <Option value={1} key={1}>是</Option>
                <Option value={2} key={2}>否</Option>
              </Select>,
            )}
          </FormItem>
        </Col>
      </Row>,

      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col md={12} sm={24}>
          <FormItem key="rewardTerm" {...this.formLayout} label="期限">
            {form.getFieldDecorator('rewardTerm', {
              rules: [{ required: true, message: '请输入期限！' }],
              initialValue: values.rewardTerm,
            })(<Input type={'Number'} placeholder="请输入"/>)}
          </FormItem>
        </Col>
        <Col md={12} sm={24}>
          <FormItem key="startTime" {...this.formLayout} label="开始时间">
            {form.getFieldDecorator('startTime', {
              rules: [{ required: true, message: '请选择开始时间！' }],
              initialValue: moment(values.startTime),
            })(
              <DatePicker placeholder="选择开始时间"
                          style={{ width: '100%' }}/>,
            )}
          </FormItem>
        </Col>
      </Row>,
      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col md={12} sm={24}>
          <FormItem key="endTime" {...this.formLayout} label="结束时间">
            {form.getFieldDecorator('endTime', {
              rules: [{ required: true, message: '请选择结束时间！' }],
              initialValue: moment(values.endTime),
            })(
              <DatePicker placeholder="选择结束时间"
                          style={{ width: '100%' }}/>)}
          </FormItem>
        </Col>
      </Row>,
      <Table
        width={750}
        rowKey={'id'}
        columns={columns}
        dataSource={dataSource}
        pagination={false}
      />,
    ];
  };

  //弹窗
  render() {
    const { updateModalVisible, handleUpdateModalVisible, modalVisible } = this.props;
    const { values } = this.props;
    this.setState({
      listData: values,
    });
    //完成
    const handleNext = () => {
      const { allArr, backArr } = this.state;
      const { form, values, handleAdd, modalVisible, handleUpdate } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        fieldsValue.endTime = fieldsValue.endTime ? moment(fieldsValue.endTime).format('YYYY-MM-DD') : '';
        fieldsValue.startTime = fieldsValue.startTime ? moment(fieldsValue.startTime).format('YYYY-MM-DD') : '';
        let obj = {
          limitRules: allArr,
          limitValues: backArr,
        };
        const formVals = { ...values, ...fieldsValue, ...obj };
        if (modalVisible) {
          handleAdd(formVals);
        } else {
          handleUpdate(formVals);
        }
      });
    };
    return (
      <Modal
        width={850}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title={modalVisible ? '新增规则' : '修改规则'}
        visible={updateModalVisible}
        onOk={handleNext}
        onCancel={() => handleUpdateModalVisible(false, [])}
      >
        {this.renderContent()}
      </Modal>
    );
  }
}

export default UpdateForm;
